<template>
  <div class="edit">
    <div class="commons_top">
      <div class="commons_back" @click="$router.go(-1)">
        <img src="@/assets/index/back.png" />
      </div>
      <span class="commons_title">个人信息</span>
    </div>
    <div class="edit_wrap">
      <div class="edit_top">
        <img :src="coverUrl(editForm.cover)" v-if="editForm.cover" class="edit_img" @click="editImg">
        <img class="edit_img" v-else src="@/assets/common/cover.png" @click="editImg">
        <mt-actionsheet
          :actions="actions"
          v-model="sheetVisible"
          :modal="true">
        </mt-actionsheet>
        <span class="edit_name">{{editForm.account}}</span>
      </div>
      <el-form ref="editForm" :model="editForm" :rules="rules" label-position="left">
        <div class="edit_title">基本资料</div>
        <div class="edit_box">
          <div class="edit_boxList">
            <el-form-item label="真实姓名" prop="name" label-width="72px">
              <el-input v-model="editForm.name" style="width:95%" placeholder="请输入真实姓名"></el-input>
              <img src="@/assets/my/arrow.png" class="edit_arrow">
            </el-form-item>
          </div>
          <div class="edit_boxList" @click="isShow=true">
            <el-form-item label="学历" prop="student" label-width="72px">
              <el-input style="width:95%" v-model="editForm.student" placeholder="请选择个人学历" disabled></el-input>
              <img src="@/assets/my/arrow.png" class="edit_arrow">
            </el-form-item>
          </div>
          <div class="edit_boxList">
            <el-form-item label="职称" prop="title" label-width="72px">
              <el-input v-model="editForm.title" style="width:95%" placeholder="请输入个人职称"></el-input>
              <img src="@/assets/my/arrow.png" class="edit_arrow">
            </el-form-item>
          </div>
          <div class="edit_boxList">
            <el-form-item label="机构" prop="organName" label-width="72px">
              <el-input v-model="editForm.organName" style="width:95%" placeholder="请输入机构名称"></el-input>
              <img src="@/assets/my/arrow.png" class="edit_arrow">
            </el-form-item>
          </div>
        </div>
        <div class="edit_title">绑定账号</div>
        <div class="edit_box">
          <div class="edit_boxList">
            <el-form-item label="微信" label-width="72px">
              <!-- <el-input style="width:4.4rem" disabled ></el-input> -->
              <div style="float:right" @click="!editForm.wechatKey?bind():unBind()">
                <span class="edit_tip">{{!editForm.wechatKey?'未绑定':'解绑'}}</span>
                <img src="@/assets/my/arrow.png" class="edit_arrow">
              </div>
            </el-form-item>
          </div>
          <div class="edit_boxList" @click="verify()">
            <el-form-item label="手机号码" label-width="72px">
              <el-input style="width:85%" disabled v-model="phone" placeholder="请输入手机号码"></el-input>
              <span class="edit_tip">验证</span>
              <img src="@/assets/my/arrow.png" class="edit_arrow">
            </el-form-item>
          </div>
        </div>
        <div class="edit_save" @click="save">保存信息</div>
        <mt-popup v-model="isShow" position="bottom">
          <div class="pop_top">
            <span class="pop_cancel" @click="isShow=false">取消</span>
            <span class="pop_confirm" @click="confirm">确认</span>
          </div>
          <div class="pop_bot">
            <mt-picker :slots="slots" @change="onValuesChange" value-key="msg" ref="picker1" :defaultIndex="defaultIndex"></mt-picker>
          </div>
        </mt-popup>
      </el-form>
    </div>
  </div>
</template>

<script>
import '@static/css/common.css'
import { Toast } from 'mint-ui'
import { getMemberAPI, educationAPI, editAPI, unBindAPI } from '@/api/person.js'

export default {
  data() {
    return {
      defaultIndex:'',
      editForm: {
        name: null,
        title: null,
        organName: null,
        academic: null,
        student: null
      },
      rules: {
        name: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { max: 10, message: '长度不超过10个字' }
        ],
        title: [
          { required: true, message: '请输入职业/职称', trigger: 'blur' },
          { max: 10, trigger: 'change', message: '长度不超过10个字' }
        ],
        organName: [
          { required: true, message: '请输入机构名称', trigger: 'blur' },
          { max: 20, trigger: 'change', message: '机构名称最多不超过20个字' }
        ],
      },
      isShow: false,
      academic: [],
      slots: [
        { flex: 1, values: [], className: 'slot1', textAlign: 'center' }
      ],
      acaIndex: null,
      acaObj: {},
      phone: null,
      sheetVisible: false,
      actions: [
        {
          name: "拍照",
          method: this.getCamera
        },
        {
          name: "从相册中选择",
          method: this.getLibrary
        }
      ]
    }
  },
  mounted() {
    this.getEducation()
  },
  methods: {
    onValuesChange(picker, values) { //选择学历
      this.acaObj = values[0]
    },
    confirm() { //选择学历点击确认
      this.editForm.student =  this.acaObj.msg
      this.acaIndex = this.acaObj.index
      this.isShow = false
    },
    getMember() {
      getMemberAPI().then(res => {
        res.data.code === 0 ? this.editForm = {...res.data.data} : Toast(res.data.msg)
        this.phone = this.editForm.phone
        let str = this.phone ? this.phone.match(/(\d{3})(\d{4})(\d{4})/).slice(1).reduce(
          function (value, item, index) {
            return index === 1 ? value + "****" : value + item;
          }
        ) : null
        this.phone = str
        this.editForm.student =  this.academic[res.data.data.academic]
        this.defaultIndex = res.data.data.academic
      })
    },
    getEducation() {//学历列表
      educationAPI().then(res => {
        if(res.data.code === 0) {
          this.academic = res.data.data
          for(var i in this.academic){
            let obj = {index:i,msg:this.academic[i]}
            this.slots[0].values.push(obj)
          }
          this.getMember()
        } else {
          Toast(res.data.msg)
        }
      })
    },
    save() { //保存
      this.$refs['editForm'].validate((valid) => {
        if(valid) {//必填名称--规则
          this.editForm.academic = this.acaIndex
          editAPI(this.editForm).then(res => {
            if(res.data.code === 0) {
              Toast('保存成功');
            } else {
              Toast(res.data.msg)
            }
          })
        }
      })
    },
    bind() { //未绑定微信弹出提示框
      Toast('请通过微信登录进行绑定')
    },
    unBind() { //绑定微信进行解绑
      let type = 2
      let that = this
      this.$confirm('确认要解绑吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        unBindAPI(type).then(res => {
          if(res.data.code === 0) {
            Toast('解绑成功')
            that.getMember()
            return
          } 
        })
      })
    },
    verify() { //验证手机
      this.navigationFuc('verify')
    },
    editImg() { //修改头像
      this.sheetVisible = true
    },
    getCamera() {
      const ua = navigator.userAgent.toLowerCase()
      console.log(ua,'拍照')
      if(ua.indexOf("android") != -1) {
        window.app.camera()
      } else if(ua.indexOf("iphone") != -1) {
        window.webkit.messageHandlers.camera.postMessage(null)
      }
      // if(this.detect() == "android") {
      //   window.app.camera()
      // } else if(this.detect() == "ios"){
      //   window.webkit.messageHandlers.camera.postMessage(null)
      // }
    },
    getLibrary() {
      console.log('从相册中选择')
      // if(this.detect() == "android") {
      //   window.app.album()
      // } else if(this.detect() == "ios"){
      //   window.webkit.messageHandlers.album.postMessage(null)
      // }
    }
  },
}
</script>

<style scoped>
.edit {
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
}
.edit_wrap {
  padding: 0.88rem 0.3rem 0.35rem;
  box-sizing: border-box;
}
.edit_top {
  overflow: hidden;
  margin-bottom: 0.45rem;
}
.edit_top .edit_img {
  width: 0.98rem;
  height: 0.98rem;
  border-radius: 50%;
  float: right;
}
.edit_top .edit_name {
  float: right;
  margin-top: 0.31rem;
  margin-right: 0.25rem;
  color: #333333;
  font-size: 19px;
  font-weight: bold;
}
.edit_title {
  margin-bottom: 0.34rem;
  color: #333333;
  font-weight: bold;
  font-size: 18px;
}
.edit_box {
  margin-bottom: 0.6rem;
}
.edit_boxList {
  border-bottom: 0.02rem solid #EEEEEE;
  /* overflow: hidden; */
}
.edit_tip {
  color: #999999;
  font-size: 12px;
}
.edit_arrow {
  width: 0.14rem;
  height: 0.24rem;
  vertical-align: middle;
  /* float: right; */
}
.edit_save {
  width: 100%;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  background: #E5E5E5;
  color: #333333;
  font-size: 15px;
  font-weight: bold;
  border-radius: 0.1rem;
  margin-top: 0.9rem;
}
.pop_top {
  overflow: hidden;
  width: 100%;
  height: 0.88rem;
  line-height: 0.88rem;
  background: #F7F7F7;
  padding: 0 0.3rem;
  box-sizing: border-box;
}
.pop_cancel {
  color: #656565;
  font-size: 15px;
}
.pop_confirm {
  float: right;
  color: #000000;
  font-size: 15px;
  font-weight: bold;
}
.pop_bot {
  background: #ffffff;
}
.pop_list {
  line-height: 0.5rem;
  color: #B8B8B8;
  font-size: 16px;
}
.pop_list .selected {
  border-bottom: 1px solid #CDCDCD;
  line-height: 0.7rem;
  color: #000000;
  font-weight: bold;
  font-size: 18px;
}
</style>
<style>
  .el-message-box {
    width: 250px !important;
  }
  .edit .el-form-item {
    margin-top: 15px !important;
    margin-bottom: 10px !important;
  }
  .edit .el-form-item__label {
    color: #333333;
    font-size: 15px;
    font-weight: 500;
  }
  .edit .el-input__inner {
    border: none !important;
  }
  .edit .el-form-item__error {
    top: 128% !important;
    left: 14px !important;
  }
  .edit .mint-popup {
    width: 100%;
    background: transparent;
  }
  .el-input.is-disabled .el-input__inner {
    background-color: transparent !important;
    color: #000 !important;
    opacity: 1 !important;
  }
  .edit .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, 
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    display: none !important;
  }
</style>